<!DOCTYPE html>
<html>
<head>
	<title>PDF Test</title>
	<meta name="referrer" content="no-referrer">
	 <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-10-y/pdf.js/2.13.216/pdf.min.js" type="application/javascript"></script>
</head>
<body>
	<div id="canvases"></div>
<script>
//var url = './Sample_Document_Lorem_Ipsum.pdf';
var url = 'https://gitee.com/sheyi/bjimages/raw/master/pdf/1001.pdf';
var pdfjsLib = window['pdfjs-dist/build/pdf'];
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://lf26-cdn-tos.bytecdntp.com/cdn/expire-10-y/pdf.js/2.13.216/pdf.worker.min.js';

var pdfDoc = null,
    pageNum = 1,
    pageRendering = false,
    pageNumPending = null,
    scale = 1.5;

function renderPage(num, canvas) {
  var ctx = canvas.getContext('2d');
  pageRendering = true;
  // Using promise to fetch the page
  pdfDoc.getPage(num).then(function(page) {
    var viewport = page.getViewport({scale: scale});
    canvas.height = viewport.height;
    canvas.width = viewport.width;

    // Render PDF page into canvas context
    var renderContext = {
      canvasContext: ctx,
      viewport: viewport
    };
    var renderTask = page.render(renderContext);

    // Wait for rendering to finish
    renderTask.promise.then(function() {
      pageRendering = false;
      if (pageNumPending !== null) {
        // New page rendering is pending
        renderPage(pageNumPending);
        pageNumPending = null;
      }
    });
  });
}

pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) {
  pdfDoc = pdfDoc_;

  const pages = parseInt(pdfDoc.numPages);

  var canvasHtml = '';
  for (var i = 0; i < pages; i++) {
  	canvasHtml += '<canvas id="canvas_' + i + '"></canvas>';
  }

  document.getElementById('canvases').innerHTML = canvasHtml;

  for (var i = 0; i < pages; i++) {
  	var canvas = document.getElementById('canvas_' + i);
  	renderPage(i+1, canvas);
  }
});

</script>
	<style type="text/css">
		body {
			background-color: #535759;
		}
		#canvases canvas {
			margin: 20px auto;
			display: block;
		}
	</style>
</body>
</html>